<template>
  <view class="flex flex-col justify-between h-full bg-gray-200">
    <view class="top flex flex-col justify-center h-30 p-5 mt-10">
      <text class="text-3xl font-bold">密码登录</text>
    </view>
    <view class="form flex-1 p-5">
      <view class="mb-5 h-15 bg-white flex items-center rounded-full px-5">
        <input
          class="h-full w-full text-xl"
          type="text"
          placeholder="输入账号"
          v-model="userForm.username"
        />
      </view>
      <view class="mb-5 h-15 bg-white flex items-center rounded-full px-5">
        <input
          class="h-full w-full text-xl"
          type="password"
          placeholder="输入密码"
          v-model="userForm.password"
        />
      </view>
      <view
        @click="handleLogin"
        class="mb-5 h-15 bg-white flex justify-center items-center rounded-full px-5 cursor-pointer active:bg-light-500"
      >
        <text class="text-2xl">登录</text>
      </view>
    </view>
    <view class="bottom flex justify-center h-20">
      <text @click="handleBack(1)">返回注册</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { login } from '@/apis/user'
import { storage } from '../../utils/storage'
const userForm = ref({
  username: '',
  password: '',
})
const handleLogin = async () => {
  if (!userForm.value.username || !userForm.value.password) {
    uni.showToast({
      icon: 'none',
      position: 'bottom',
      title: '请输入正确的账号和密码',
    })
    return
  }
  uni.showLoading({})
  const res = await login({
    username: userForm.value.username,
    password: userForm.value.password,
  })
  uni.hideLoading()
  if (res.success) {
    uni.showToast({
      icon: 'success',
      position: 'bottom',
      title: '登录成功',
    })
    storage.set('token', res.data)
    uni.switchTab({
      url: '/pages/moment/moment',
    })
    return
  }
  uni.showToast({
    icon: 'error',
    position: 'bottom',
    title: res.message,
  })
}
const handleBack = step => {
  uni.navigateBack({
    delta: step,
  })
}
</script>

<style lang="scss">
page {
  height: 100% !important;
}
</style>
